<template>
  <dc-row type="flex" justify="end" class="otinputitem mix1px">
    <dc-col span="3" class="iconcan">
      <i :class="classes"></i>
    </dc-col>
    <dc-col span="21">
      <mt-field class="inputitem"
                :class="fieldclass"
                v-bind:type="type"
                v-bind:label="label"
                v-model="currentValue"
                v-bind:attr="{maxlength:maxLength}"
                v-bind:placeholder="placeholder"
                @input="handleInput"></mt-field>
    </dc-col>
  </dc-row>
</template>
<script>
  /**
   * App component.
   * @module common/plugins/inputItem
   * @author sea
   * @description 为了视觉中出现的带图标的输入框组件，封装了这个输入组件，加入了输入class名称，然后显示对应字体图片的功能。
   */
  import {col, row} from '@/components/Flex';

  export default {
    data () {
      return {
        currentValue: this.value
      };
    },
    props: {
      value: {},
      maxLength: Number,
      iconName: String,
      label: {
        type: String,
        default: ''
      },
      type: String,
      placeholder: String
    },
    components: {
      'dc-col': col,
      'dc-row': row
    },
    computed: {
      classes () {
        const oprateclass = ['icon', 'iconfont', 'iconsize'];
        if (this.iconName) {
          oprateclass.push(this.iconName);
        }
        return oprateclass;
      },
      fieldclass () {
        if (this.label !== '') {
          return ['fieldclass'];
        }
      }
    },
    methods: {
      handleInput (evt) {
        this.currentValue = evt;
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      },
      currentValue (val) {
        this.$emit('input', val);
      }
    }
  };
</script>
<style lang="scss">
  .inputitem .mint-cell-wrapper {
    background-image: none;
  }

  .inputitem.mint-cell:last-child {
    background-image: none;
  }
  .inputitem.mint-field .mint-cell-value {
    height: 100%;
    .mint-field-core{
      height: 100%;
      line-height: 100%; //不知道有没有坑
    }
  }

  .fieldclass .mint-cell-wrapper .mint-cell-value input {
    text-align: right;
  }
</style>
<style lang="scss" scoped>
  @import '../../assets/css/variable';

  .inputitem {
    margin-left: - px2rem(20px);
  }

  .iconcan {
    padding-top: 10px;
    color: #5e5f6e;
  }

  .iconsize {
    font-size: px2rem(48px);
  }

  .otinputitem {
    .mint-cell {
      background-color: inherit;
    }
  }
</style>
